<template>
  <el-table-column>
    <template #default="scope">
      <div
        :class="{ click__div: clickFnc }"
        @click="
          () => {
            clickFnc && clickFnc(scope.row);
          }
        "
      >
        <span v-if="slot">
          <slot :name="slot" :[slot]="{row:scope.row, $index:scope.$index, column: scope.column}"/>
        </span>
        <span v-else-if="$attrs.formatter">
          {{$attrs.formatter(scope.row, scope.column, scope.row[$attrs.prop],scope.$index)}}
        </span>
        <span v-else>{{ scope.row[$attrs.prop] }}</span>
      </div>
      <template v-if="children && children.length > 0">
        <JimuTableColumns v-for="(item,index) in children" :key="index" v-bind="item">
          <template  v-for="(slot, slotName) in $slots" :key="slotName" #[slotName]>
            <slot :name="slotName" />
          </template>
        </JimuTableColumns> 
      </template>
    </template>
  </el-table-column>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: "JimuTableColumns",
  props:{
    // prop:String,
    // width:String,
    // label:String,
    type:String,
    slot:String,
    clickFnc:{
      type:Function,
      // default:()=>()
    },
    children:{
      type:Array,
      default:()=>[]
    }
  },
})
</script>
